<template>
    <div class="cjrh-wai">
        <!-- 文章图片 -->
        <div class="cjrh-Image">
            <span class="cjrh-span">上传图片：</span>
            <div class="image-div">
                <div class="image-div-left">
                    <a-upload
                        list-type="picture-card"
                        action="/"
                        :default-file-list="fileList"
                        image-preview
                    />
                </div>
                <div class="image-div-right">
                    <div class="right-button">
                        <button>从图库选择</button>
                        <button>本地上传</button>
                    </div>
                    <span class="right-span">
                        图片格式为PNG、JPG，最大不超过5M
                    </span>
                </div>
            </div>
        </div>
        <!-- 列表图片 -->
        <div class="cjrh-Image">
            <span class="cjrh-span">图片更改：</span>
            <div class="image-div">
                <div class="image-div-left">
                    <a-upload
                        list-type="picture-card"
                        action="/"
                        :default-file-list="fileList"
                        image-preview
                    />
                </div>
                <div class="image-div-right">
                    <div class="right-button">
                        <button>从图库选择</button>
                        <button>本地上传</button>
                    </div>
                    <span class="right-span">
                        图片格式为PNG、JPG，最大不超过5M
                    </span>
                </div>
            </div>
        </div>
        <!-- 文章状态 -->
        <div class="cjrh-state">
            <span class="cjrh-span">公司状态：</span>
            <a-radio-group v-model="value1" :options="plainOptions" />
        </div>
        <!-- 按钮 -->
        <div class="cjrh-button">
            <a-button
                type="primary"
                :style="{
                    background: 'white',
                    color: 'darkgray',
                    border: '1px solid darkgray',
                }"
            >
                取消
            </a-button>
            <a-button type="primary">确定</a-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

let fileList = reactive([])
let value1 = ref('')
const plainOptions = ['显示', '隐藏']
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}
.cjrh-wai {
    width: 100%;
    height: 100%;
}
.cjrh-title {
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
}
.cjrh-span {
    margin-left: 15px;
    color: black;
    font-weight: 400;
    font-size: 14px;
}
.cjrh-partition {
    width: 100%;
    height: 5%;
    display: flex;
    align-items: center;
}
.arco-select-view-suffix {
    padding-left: 10px;
}
.cjrh-content {
    width: 100%;
    height: 20%;
    display: flex;
    align-items: flex-start;
    margin-top: 2%;
}
.cjrh-Image {
    width: 100%;
    height: 15%;
    display: flex;
    align-items: flex-start;
    margin-top: 2%;
}
.image-div {
    width: 80%;
    height: 100%;
    margin-left: 25px;
    display: flex;
}
.image-div-left {
    width: 15%;
    height: 100%;
}
.image-div-right {
    width: 80%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
}
.right-button {
    width: 100%;
}
.right-button > button {
    width: 130px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    margin-right: 15px;
    background-color: white;
    border: 1.5px solid darkgray;
}
.right-span {
    font-size: 12px;
    margin-top: 10px;
}
.cjrh-keyword {
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
}
.keyword-button {
    width: 130px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    margin-left: 15px;
    background-color: white;
    border: 1.5px solid darkgray;
}
.cjrh-state {
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
}
.arco-radio-group {
    margin-left: 15px;
}
.cjrh-button {
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.arco-btn-primary {
    width: 80px;
    margin-right: 15px;
}
</style>
